<template>
  <div class="filePreview">
    <VueOfficeDocx v-if="['word', 'docx', 'doc'].includes(obj.type)" :src="obj.fileSrc" style="width: 100%;height: 100vh" @rendered="rendered" />
    <VueOfficeExcel v-else-if="['excel', 'xlsx'].includes(obj.type)" :src="obj.fileSrc" style="width: 100%;height: 100vh" @rendered="rendered" />
    <el-image
      v-else-if="['jpg', 'png', 'jpeg', 'bmp'].includes(fileObj.type)"
      style="width: 100%; height: auto"
      :src="fileObj.fileSrc"
      fit="cover"
    />
    <iframe
      v-else-if="['ppt', 'pptx'].includes(fileObj.type)"
      title="iframePpt"
      :src="`https://view.xdocin.com/view?src=${encodeURIComponent(fileObj.fileSrc)}`"
      style="border: none;"
      width="100%"
      height="500"
    />
    <video
      v-else-if="['mp3', 'mp4', 'webm', 'ogg', 'aac', 'wav'].includes(fileObj.type)"
      :src="fileObj.fileSrc"
      style="width: 100%;"
      controls
    >
      <track kind="subtitles" :src="fileObj.subtitleSrc" srclang="zh" label="中文字幕">
      <track kind="description" :src="fileObj.descriptionSrc" srclang="zh" label="中文描述">
    </video>
    <pre v-else-if="['txt'].includes(fileObj.type)" style="overflow-y: auto;">
      {{ fileObj.fileSrc }}
      <!-- {{ window.open(fileObj.fileSrc, '_blank') }} -->
    </pre>
  </div>
</template>

<script>
// 引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
// 引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
// 引入docx相关样式
import '@vue-office/docx/lib/index.css'
// 引入excel相关样式
import '@vue-office/excel/lib/index.css'
export default {
    name: 'FilePreview',
    components: {
        VueOfficeDocx,
        VueOfficeExcel
    },
    props: {
        fileObj: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            obj: {}
        }
    },
    watch: {
        fileObj: {
            handler(newV) {
                console.log(newV, 'fileObj')
            },
            deep: true
        }
    },
    created() {
        const { type, fileSrc } = this.$route.query
        this.obj = {
            type,
            fileSrc
        }
    },
    methods: {
        rendered() {
            console.log('渲染完成')
        }
    }
}
</script>

<style lang="scss" scoped>
.filePreview{
    height: auto;
    overflow-y: auto;
}
</style>
